import { withI18n, Trans } from '@lingui/react'
//import { Form } from 'antd'
import React, { Fragment, PureComponent } from 'react'
import PropTypes from 'prop-types'
import { DescriptionList } from 'ant-design-pro'
import { Page } from 'components'
import {
  Spin,
  Empty,
  Radio,
  Typography,
  DatePicker,
  Button,
  Icon,
  Tooltip,
  Alert,
} from 'antd'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'
import 'echarts-gl'
import styles from '../index.less'
import moment from 'moment'
const { MonthPicker, RangePicker, WeekPicker } = DatePicker
const { Paragraph } = Typography
const { Description } = DescriptionList

const datetoday = moment().format('YYYY-MM-DD')

@withI18n()
class History extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      whichone: 'v',
      isoneday: false,
    }
  }

  getoption(data, hisstartdate, hisenddate, isoneday) {
    const { i18n } = this.props
    const { whichone } = this.state //, isoneday
    const pref = {
      v: i18n.t`Voltage`,
      e: i18n.t`Electric Current`,
      p: i18n.t`Power`,
      tp: i18n.t`Plate Temperature`,
      pv_v: i18n.t`Solar charging Voltage`,
      led_v: i18n.t`Lamp Voltage`,
    }
    const preffix = pref[whichone]
    let min, max
    if (isoneday) {
      min = moment(hisenddate + ' 00:00:01')
        .format('YYYY-MM-DD HH:mm:ss')
        .valueOf() //moment(hisenddate + ' 00:00:01', 'YYYY-MM-DD HH:mm:ss').valueOf()
      max = moment(hisenddate + ' 23:59:59')
        .format('YYYY-MM-DD HH:mm:ss')
        .valueOf()
      console.log(hisenddate + ' 00:00:01')
    } else {
      min = moment(datetoday + ' 00:00:01').valueOf()
      max = moment(datetoday + ' 23:59:59').valueOf()
    }
    const targetoption = isoneday
      ? {
          tooltip: {
            trigger: 'axis',
            formatter: (params, ticket, callback) => {
              const { data, dataIndex, value } = params[0]
              return `${preffix} : ${value[1]}<br/>${i18n.t`Time`} : ${moment(
                value[0]
              ).format('MM-DD HH:mm:ss:SSS')}`
            },
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          dataZoom: {
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0],
          },
          xAxis: {
            type: 'time',
            boundaryGap: false,
            min,
            max,
          },
          yAxis: {
            name: preffix,
            type: 'value',
          },
          series: [
            {
              name: preffix,
              type: 'line',
              // symbolSize: 8,
              stack: '总量',
              data,
            },
          ],
        }
      : {
          grid3D: {},
          xAxis3D: {
            type: 'category',
            name: i18n.t`Date`,
          },
          yAxis3D: {
            type: 'time',
            name: i18n.t`Time`,
            min,
            max,
            interval: 60 * 60 * 4 * 1000,
            axisLabel: {
              formatter: value => {
                return moment(value).format('HH:mm:ss')
              },
            },
            axisPointer: {
              label: {
                show: false,
              },
            },
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          zAxis3D: {
            name: pref[whichone],
            type: 'value',
          },
          series: [
            {
              type: 'scatter3D',
              symbolSize: 2.5,
              encode: {
                x: 'DATE',
                y: 'TIME',
                z: 'V',
              },
              label: {
                formatter: values => {
                  return `${preffix} : ${
                    values.value[2]
                  }\n${i18n.t`Time`} : ${moment(values.value[1]).format(
                    'MM-DD HH:mm:ss:SSS'
                  )}`
                },
              },
              data,
            },
          ],
        }
    // console.log(JSON.stringify(targetoption))
    return targetoption
  }

  ismultidataaccess = laterdata => {
    // const { laterdata } = this.props
    const targdata =
      laterdata && laterdata[this.state.whichone]
        ? laterdata[this.state.whichone]
        : []
    return targdata.length > 0
  }
  componentWillReceiveProps(nextprops) {
    const { laterdata, hisstartdate, hisenddate } = nextprops
    const isoneday = hisstartdate == hisenddate
    this.setState({ isoneday }, () => {
      if (this.ismultidataaccess(laterdata) && this.echarts_react) {
        // console.log(JSON.stringify(laterdata[this.state.whichone]))
        // let echarts_instance = this.echarts_react.getEchartsInstance()
        // echarts_instance.setOption({
        //   ...this.getoption(
        //     laterdata[this.state.whichone],
        //     hisstartdate,
        //     hisenddate,
        //     isoneday
        //   ),
        // })
      }
    })
  }

  render() {
    const {
      i18n,
      data,
      deviceid,
      Imei,
      gethistorydata,
      hisstartdate,
      hisenddate,
      updateHistoryDate,
      laterdata,
      loading,
    } = this.props
    const isoneday = hisstartdate == hisenddate
    const { whichone } = this.state //, isoneday
    return (
      <Page inner>
        <DescriptionList
          size="large"
          title={
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ fontWeight: 'bold' }}>
                <Trans>Historically reported data of equipment</Trans>
                &nbsp;&nbsp;
              </div>
              {/* <div>
                <Icon type="info-circle" style={{ fontSize: '10px' }} />&nbsp;
                <span style={{ fontSize: '10px' }}>
                  <Trans>Data reported 24 hours ago</Trans>
                </span>&nbsp;&nbsp;
              </div> */}
              <Alert
                message={
                  <span>
                    <Icon type="info-circle" style={{ color: 'red' }} /> &nbsp;{' '}
                    <Trans>Double click a day to view the details view</Trans>
                  </span>
                }
                style={{
                  fontSize: '10px',
                  fontWeight: 'bold',
                  width: 240,
                  paddingTop: 2,
                  paddingBottom: 2,
                }}
              />
            </div>
          }
        >
          <Spin spinning={loading}>
            <Radio.Group
              value={whichone}
              onChange={e => {
                this.setState({ whichone: e.target.value })
              }}
              style={{
                marginLeft: '10px',
                marginRight: '10px',
                marginBottom: '10px',
              }}
            >
              <RangePicker
                value={[
                  moment(hisstartdate, 'YYYY-MM-DD'),
                  moment(hisenddate, 'YYYY-MM-DD'),
                ]}
                placeholder={i18n.t`Select Time`}
                format={'YYYY-MM-DD'}
                onChange={dates => {
                  gethistorydata(
                    dates[0] ? dates[0].format('YYYY-MM-DD') : undefined,
                    dates[1] ? dates[1].format('YYYY-MM-DD') : undefined
                  )
                }}
                ranges={{
                  今天: [moment(), moment()],
                  本月: [moment().startOf('month'), moment().endOf('month')],
                }}
              />
              <Radio.Button value="v">
                <Trans>Voltage</Trans>
              </Radio.Button>
              <Radio.Button value="e">
                <Trans>Electric Current</Trans>
              </Radio.Button>
              <Radio.Button value="p">
                <Trans>Power</Trans>
              </Radio.Button>
              <Radio.Button value="tp">
                <Trans>Plate Temperature</Trans>
              </Radio.Button>
              <Radio.Button value="pv_v">
                <Trans>Solar charging Voltage</Trans>
              </Radio.Button>
              <Radio.Button value="led_v">
                <Trans>Lamp Voltage</Trans>
              </Radio.Button>
            </Radio.Group>

            <div>
              {this.ismultidataaccess(laterdata) ? (
                isoneday ? (
                  <div>
                    <ReactEcharts
                      // ref={e => {
                      //   this.oneday_echarts_react = e
                      // }}
                      option={this.getoption(
                        laterdata[whichone],
                        hisstartdate,
                        hisenddate,
                        isoneday
                      )}
                      style={{ minHeight: '700px', width: '100%' }}
                    />
                    {/* <Empty style={{ marginTop: "20px" }} /> */}
                  </div>
                ) : (
                  <ReactEcharts
                    // ref={e => {
                    //   this.echarts_react = e
                    // }}
                    option={this.getoption(
                      laterdata[whichone],
                      hisstartdate,
                      hisenddate,
                      isoneday
                    )}
                    style={{ minHeight: '600px', width: '100%', opecity: '0' }}
                  />
                )
              ) : (
                <Empty style={{ marginTop: '20px' }} />
              )}
            </div>
          </Spin>
        </DescriptionList>
      </Page>
    )
  }
}

History.propTypes = {
  onAdd: PropTypes.func,
  //form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default History
